<template>
    <!--        @touchmove.stop.prevent="moveHandle"-->
    <view class="draggable"
          @touchmove="handleTouchMove" @touchstart="handleTouchStart"
          @touchend="handleTouchEnd"
          :style="{width:size+'rpx',  height: size+'rpx', transform: 'translate(' + offset.x + 'px, ' + offset.y + 'px)'}">
        <slot>
        </slot>
    </view>

</template>

<script setup>
const props = defineProps({
    size: {
        type: Number,
        default: 160
    }
})

const offset = ref({x: 300, y: 500})
const startPoint = ref({x: 0, y: 0})
const flag = ref(true)
const draggableBoxSize = ref(0)
const getWindowInfo = ref({})

const handleTouchStart = (event) => {
    startPoint.value = {x: event.touches[0].clientX, y: event.touches[0].clientY};
}

const handleTouchMove = (event) => {
    // x轴
    if (event.touches[0].clientX >= getWindowInfo.value.screenWidth - draggableBoxSize.value) {
        return
    }
    // Y轴
    if (event.touches[0].clientY >= getWindowInfo.value.screenHeight - props.size) {
        return
    }
    // Y轴顶部100px
    if (event.touches[0].clientY <= 100) {
        return
    }
    const currentPoint = {x: event.touches[0].clientX, y: event.touches[0].clientY};
    const delta = {
        x: currentPoint.x - startPoint.value.x,
        y: currentPoint.y - startPoint.value.y
    };
    offset.value = {x: offset.value.x + delta.x, y: offset.value.y + delta.y};
    startPoint.value = currentPoint;
    // 限制拖动范围
    restrictDrag();
}

const handleTouchEnd = () => {
    // 可以在这里处理拖动结束后的逻辑
    flag.value = true;
}
//获取父元素宽度高度使其防止拖出页面
const restrictDrag = () => {
    // flag.value = false
    uni.createSelectorQuery()
    .select('.container') // 选择你要获取尺寸的盒子元素，这里假设盒子元素的class为box
    .boundingClientRect((res) => {
        const maxX = res?.width - 100; // 屏幕宽度，单位为px
        // console.log('宽度111', res)
        const maxY = res?.height - 100; // 屏幕高度，单位为px
        const minX = 0; // 边距
        const minY = 0; // 边距
        if (offset.value.x > maxX) {
            
            offset.value.x = maxX;
        } else if (offset.value.x < minX) {
            offset.value.x = minX;
        }
        
        if (offset.value.y > maxY) {
            offset.value.y = maxY;
        } else if (offset.value.y < minY) {
            offset.value.y = minY;
        }
    })
    .exec();
}
onMounted(() => {
    getWindowInfo.value = uni.getWindowInfo() // 屏幕款高信息
    draggableBoxSize.value = qly.tool.rpx2px(props.size) / 2  // 盒子的px
    
    // #ifdef APP-PLUS
    offset.value.x = getWindowInfo.value.screenWidth - 100
    // #endif
    // #ifdef H5
    offset.value.x = getWindowInfo.value.screenWidth - 120
    // #endif
    // #ifdef MP-WEIXIN
    offset.value.x = getWindowInfo.value.screenWidth - 100
    // #endif
    offset.value.y = getWindowInfo.value.screenHeight - 200
})
</script>

<style>
.draggable {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    cursor: move;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
